<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

</head>

<body>

    <div id="app">
    </div>

    <!-- 父组件 -->
    <template id="one">

        <hr>
        所谓作用域插槽，就是在父组件中接收来自子组件插槽传递的属性，<br>
        常用于组件在插槽中渲染列表而又希望自定义每项内容(父子组件相互传递数据)
        <br>父组件数据---&gt;传递到子组件--&gt;子组件数据显示到父组件模版中
        <hr>
        <!-- 默认插槽需要使用 v-slot:default 来接收属性集合 简写为 #default -->
        <two :messages="contents" #default="message">
            {{message.index}} : {{message.value}}
            <button @click="myalert()">点我 ---- 随机数：{{num}}</button>
            <hr>
        </two>


        <hr>
        <!-- 具名插槽 给插槽名字赋值，就是子组件绑定属性的集合-->
        <!-- 对具名插槽赋值表示声明一个变量接收来自插槽传递的所有属性的集合 -->
        <three :datas="contentsThree">
            <template #slotname1="threeValue">
                <h1>test ---{{threeValue}}</h1>
            </template>
            <template #slotname2="slotPorps">
                <div>
                    --:{{ slotPorps.index }} 
                    --:{{ slotPorps.key}}
                    --:{{ slotPorps.value}}
                </div>
            </template>
        </three>
    </template>

    <!-- 子组件1 -->
    <template id="two">
        <div>
            <!-- 将遍历结果的每一次参数通过属性传递给父组件中的插槽 -->
            <slot v-for="(vla,idx) in messages" :value="vla" :index="idx">
                我是默认信息
            </slot>
        </div>
    </template>

    <!-- 子组件2 -->
    <template id="three">
        <!-- 当 -->
        <slot name="slotname1" :threeValue="threeName"></slot>
        <slot name="slotname2" v-for="(vla,nam,idx) in datas" :value="vla" :key="nam" :index="idx"></slot>
    </template>

</body>
<script>

    /**
     * 所谓作用域插槽，就是在父组件中接收来自子组件插槽传递的属性，
     * 常用于组件在插槽中渲染列表而又希望自定义每项内容。
     * */
    let twoConfig = {
        template: '#two',
        props: {
            messages: {
                type: Array,
                default: []
            }
        },
        data() {
            return {}
        },
    }

    let threeConfig = {
        template: '#three',
        props: {
            datas: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                'threeName': '2'
            }
        }
    }

    let config = {
        template: '#one',
        data() {
            return {
                'num': 0,
                'butname': '我是一个父按钮',
                'contents': ['我是', '一位', '大', '帅', '哥', '，', '哈哈'],
                'contentsThree': {
                    'name':'lisi',
                    'age':23,
                    'sex':'男'
                }
            }
        },
        components: {
            'two': twoConfig,
            'three': threeConfig
        },
        methods: {
            myalert() {
                let t = Math.random();
                this.num = '我是父组件函数' + t;
            }
        }
    }
    Vue.createApp(config).mount('#app');

</script>

</html>